<template>
  <div class="statistics-page">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in statsData" :key="index">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="40" :color="item.color">
                <component :is="item.icon" />
              </el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">{{ item.title }}</div>
              <div class="stat-value">{{ item.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { list as listAnnouncement } from '@/api/announcement'
import { list as listApplyRequest } from '@/api/applyrequest'
import { list as listDevice } from '@/api/device'
import { list as listInventory } from '@/api/inventory'
import { listPurchase } from '@/api/purchase'
import { listRepairorder } from '@/api/repairorder'
import { listUser } from '@/api/user'

const statsData = ref([
  { title: '公告数量', value: 0, icon: 'Bell', color: '#409EFF' },
  { title: '申请数量', value: 0, icon: 'Document', color: '#67C23A' },
  { title: '设备数量', value: 0, icon: 'Cpu', color: '#E6A23C' },
  { title: '库存数量', value: 0, icon: 'Box', color: '#F56C6C' },
  { title: '采购数量', value: 0, icon: 'ShoppingCart', color: '#909399' },
  { title: '维修工单', value: 0, icon: 'Tools', color: '#FF85C0' },
  { title: '用户数量', value: 0, icon: 'User', color: '#722ED1' }
])

const fetchStats = async () => {
  try {
    const [
      announcementRes,
      applyRequestRes,
      deviceRes,
      inventoryRes,
      purchaseRes,
      repairorderRes,
      userRes
    ] = await Promise.all([
      listAnnouncement(),
      listApplyRequest(),
      listDevice(),
      listInventory(),
      listPurchase(),
      listRepairorder(),
      listUser()
    ])
    
    statsData.value[0].value = announcementRes?.length || announcementRes.length || 0
    statsData.value[1].value = applyRequestRes?.length || applyRequestRes.length || 0
    statsData.value[2].value = deviceRes?.length || deviceRes.length || 0
    statsData.value[3].value = inventoryRes?.length || inventoryRes.length || 0
    statsData.value[4].value = purchaseRes?.length || purchaseRes.length || 0
    statsData.value[5].value = repairorderRes?.length || repairorderRes.length || 0
    statsData.value[6].value = userRes?.length || userRes.length || 0
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  fetchStats()
})
</script>

<style scoped>
.statistics-page {
  padding: 20px;
}
.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
}
.stat-icon {
  margin-right: 20px;
}
.stat-content {
  flex: 1;
}
.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
}
</style>